AI Lessons
Lesson 20: Using our trained model in our project

Purpose: To integrate an exported, custom-trained image classification model into a web application to trigger real-time interactive actions and state changes.

No. of Classes

1 - (Time : 1 hour 30 minutes, Laptops/desktops : 10, Students strength : 15 to 20).

Materials Required

Laptop / Desktop with Internet connection / Wi-Fi.

A working webcam and code editor (p5.js Web Editor or Visual Studio Code).

Base starter project files ("Digital Doorman" or Security System template).

Curriculum Content

3. Programming Foundations for AI

  • 3.3 Conditionals and program state

5. Training Custom AI Models

  • 5.6 Exporting and deploying a model

7. Designing AI-enabled Systems

  • 7.1 AI as part of a system
  • 7.2 Problem definition and model selection
  • 7.3 Integrating models into applications
Prior knowledge
  • Training custom image classification models in Teachable Machine (Lesson 19)
  • Exporting cloud model links (model.json URLs)
  • Basic JavaScript conditional statements and program state
Exercises

Exercise - The Digital Doorman Web Application


  • Train a custom image model in Teachable Machine with classes such as "Owner", "Stranger", and "Background".
  • Export the model as a cloud link (Teachable Machine hosted link) or download the model files (`model.json`, `metadata.json`, `weights.bin`).
  • Download the Base Starter Code and open it in your code editor.
  • Replace the template placeholder URL with your custom model link.
  • Write conditional statements in JavaScript to change the project UI state: displaying "Access Granted" (green theme) when "Owner" is recognized, and "Access Denied" (red alert) when "Stranger" or "Background" is detected.

Solutions


Teacher's Instruction:
  1. Demonstrate how the trained model is exported from Teachable Machine using url links or model files.
  2. Explain why the model needs to be loaded asynchronously in preload() - the browser must load the weights before starting live predictions.
  3. Guide Application Logic & State Control:
    • Explain how the web application polls the model for predictions continuously inside the classify/callback loop.
    • Show students how to read `results[0].label` and `results[0].confidence`.
    • Demonstrate setting a minimum confidence threshold (e.g., `if (label == "Owner" && confidence > 0.85)`) and explain why we need this threshold
  4. Points to Ponder:
    • If someone holds up a printed photo of the "Owner" to the webcam, how would your app react? What extra safeguards would a real smart lock need?